import { Component, OnInit } from '@angular/core';
import {LocalDataSource} from "ng2-smart-table";
import {DepartmentService} from "../../share/services/department.service";
import {Ng2TreeSettings, NodeEvent, TreeModel} from "ng2-tree";

@Component({
  selector: 'app-department',
  templateUrl: './department.component.html',
  styleUrls: ['./department.component.css']
})
export class DepartmentComponent implements OnInit {
  regionTree: TreeModel
  treeSettings: Ng2TreeSettings
  gridSettings
  gridSource: LocalDataSource;
  rootDeptCode:string = '90000000'
  constructor(private departmentService: DepartmentService) {
    this.gridSource = new LocalDataSource();
  }


  ngOnInit() {
    console.debug('DepartmentComponent init')
    let self = this

    this.treeSettings = { rootIsVisible: true }
    this.departmentService.list(this.rootDeptCode).subscribe(
      data => {
        console.dir(data)
        this.regionTree = {
          value: '集团公司',
          id: this.rootDeptCode,
          settings: {
            cssClasses: {
              expanded: 'fa fa-caret-down',
              collapsed: 'fa fa-caret-right',
              empty: 'fa fa-caret-right disabled',
              leaf: 'fa'
            },
            templates: {
              node: '<i class="fa fa-folder-o"></i>',
              leaf: '<i class="fa fa-file-o"></i>'
            }
          },
          children: data.map(item => {return {
            'value': item['deptName'],
            'id': item['deptCode'],
            'children': [],
            'loadChildren': (callback) => {
              this.departmentService.list(item['deptCode']).subscribe(
                data => {
                  callback(data.map(subItem => {return {
                    'value': subItem['deptName'],
                    'id': subItem['deptCode'],
                    'children': [],
                    'loadChildren': (callback) => {
                      this.departmentService.list(subItem['deptCode']).subscribe(
                        data => {
                          callback(data.map(subsubItem => {return {
                            'value': subsubItem['deptName'],
                            'id': subsubItem['deptCode']
                          }}))
                        }
                      )
                    }
                  }}))
                }
              )
            }
          }})
        }
      }
    )
    this.gridSettings = {
      selectMode: 'multi',
      hideSubHeader: true,
      noDataMessage: '没有数据',
      editable: false,
      attr: {
        class: 'table table-striped table-bordered'
      },
      actions: {
        columnTitle: '操作',
        add: false,
        edit: false,
        delete: true,
        position: 'right',
      },
      delete: {
        deleteButtonContent: '删除',
        confirmDelete: true,
      },
      page: {
        display: true,
        perPage: 10,
      },
      columns: {
        deptName: {
          title: '机构名称',
        },
        region: {
          title: '归属区域',
        },
        deptCode: {
          title: '机构编码',
        },
        deptType: {
          title: '机构类型',
        },
        comment: {
          title: '备注',
        }
      }
    }
    this.gridLoadData(this.rootDeptCode)
  }
  gridLoadData(parentCode){
    this.departmentService.list(parentCode).subscribe(
      data => {
        this.gridSource.load(data)
      }
    )
  }
  public onNodeRemoved(e: NodeEvent): void {
  }

  public onNodeMoved(e: NodeEvent): void {
  }

  public onNodeRenamed(e: NodeEvent): void {
  }

  public onNodeCreated(e: NodeEvent): void {
  }

  public onNodeSelected(e: NodeEvent): void {
    console.debug('onNodeSelected')
    console.dir(e)
    console.debug(e.node.node.id)
    this.gridLoadData(e.node.node.id)
  }

  public onNodeExpanded(e: NodeEvent): void {
    console.debug('onNodeExpanded')
  }

  public onNodeCollapsed(e: NodeEvent): void {
  }
  userRowSelect($event){
    console.debug($event)
  }
  mouseover($event){
    console.debug($event)
  }

}
